<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="theme-color" content="#1e1e1e">
  <meta name="msapplication-navbutton-color" content="#1e1e1e">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <title>Agent Terminal</title>
  <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Fira Code', monospace;
      margin: 0;
      padding: 20px 20px 20px 20px;
      background-color: #1e1e1e;
      color: #c5c5c5;
      height: 100vh;
      display: flex;
      flex-direction: column;
      overflow: hidden; /* Prevent body from scrolling */
      box-sizing: border-box;
    }
    h1 {
      font-size: 24px;
      color: #06883e;
      margin: 0 0 20px 0;
    }
    .console {
      /* background-image: url('./assets/images/agent.png'); */
      background-size: contain; /* Fit the image within the element */
      background-repeat: no-repeat; /* Prevent repeating */
      background-position: center; /* Center the image */
      height: 100vh; /* Full viewport height */
      width: 100%;
      background-color: transparent;
      color: #ffffff;
      padding: 10px 10px 10px 10px;
      flex-grow: 1;
      overflow: auto;
      border-radius: 4px;
      display: flex;
      font-family: 'Fira Code', monospace;
      flex-direction: column;
      position: relative;
      white-space: pre-wrap;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
      box-sizing: border-box;
    }
    .console::-webkit-scrollbar {
      width: 12px;
    }
    .console::-webkit-scrollbar-track {
      background: #1a1a1a;
      border-radius: 6px;
    }
    .console::-webkit-scrollbar-thumb {
      background: #333333;
      border-radius: 6px;
      border: 2px solid #1a1a1a;
    }
    .console::-webkit-scrollbar-thumb:hover {
      background: #555555;
    }
    .input {
      display: flex;
      flex-direction: column;
      position: relative;
      margin: 10px 0px 0px 0px;
    }
    .input-line {
      display: flex;
      width: 100%;
    }
    .input-line span {
      color: #ffffff;
    }
    #consoleInput {
      background-color: #2e2e2e;
      color: #c5c5c5;
      display: flex;
      border: 1px solid #555;
      font-size: 16px;
      width: 100%;
      outline: none;
      padding: 10px;
      border-radius: 4px;
      font-family: 'Fira Code', monospace;
    }
    #commandDropdown {
      position: absolute;
      background-color: #333;
      color: #c5c5c5;
      border: 1px solid #555;
      border-radius: 4px;
      z-index: 1000;
      max-height: 150px;
      overflow-y: auto;
      font-size: 16px;
      white-space: nowrap; /* Prevent wrapping */
    }
    #commandDropdown div {
      padding: 5px;
      cursor: pointer;
    }
    #commandDropdown div:hover {
      background-color: #555;
      color: #ffffff;
    }
    table.vampire-matrix {
      width: 100%; /* Make the table consume the entire window width */
      border-collapse: collapse;
      background-color: #030303;
      box-shadow: none;
    }

    table.vampire-matrix th,
    table.vampire-matrix td {
      border: 1px solid #333;
      padding: 10px 15px;
      text-align: left;
      vertical-align: middle;
      word-wrap: break-word; /* Ensure content wraps within the cell */
    }

    table.vampire-matrix thead th {
      background-color: #0a0a0a;
      color: #fff;
      font-size: 1.1em;
    }

    table.vampire-matrix tbody tr {
      transition: background-color 0.3s;
    }

    table.vampire-matrix tbody tr:hover {
      background-color: #080808;
    }

    table.vampire-matrix tbody tr:nth-child(even) {
      background-color: #050505;
    }

    table.vampire-matrix tbody tr:nth-child(odd) {
      background-color: #020202;
    }

    table.vampire-matrix td {
      color: #fff; /* Change text color to white */
    }

    table.vampire-matrix th {
      border-bottom: 2px solid #444;
    }

    table.vampire-matrix tbody td:first-child {
      border-left: 2px solid #444;
    }

    table.vampire-matrix tbody td:last-child {
      border-right: 2px solid #444;
    }

    tr {
      height: 20px;
      max-height: 20px; /* Set your desired max-height here */
      overflow: hidden;
    }
    tr > td {
      max-height: inherit; /* Apply max height to each cell */
      overflow: hidden; /* Ensure content overflow is hidden in each cell */
    }

    @media (prefers-color-scheme: dark) {
      body {
        background-color: #0a0a0a;
      }
    }
  </style>
</head>
<body>
  <!-- <h1>Agent Terminal</h1> -->
  
  <div class="agentstatus" id="agentstatus">
    <table id="agentTable" class="vampire-matrix" height="20px">
      <tbody>
        <tr id="agentDataRow">
          <td>Loading..</td>
          <td>-</td>
          <td>-</td>
          <td>-</td>
          <td>-</td>
          <td>-</td>
          <td>-</td>
          <td>-</td>
          <td>-</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="console" id="consoleOutput"></div>
  <div class="input">
    <div class="input-line">
      <input type="text" id="consoleInput" autocomplete="off" />
    </div>
    <div id="commandDropdown"></div>
  </div>
  <script src="agent.js"></script>
  <script>
    // Function to apply font settings to this agent window
    function applyFontSettings(settings) {
      console.log('=== APPLYING FONT SETTINGS ===');
      console.log('Settings received:', settings);
      
      const elementsToStyle = [
        document.body,
        document.getElementById('consoleOutput'),
        document.getElementById('consoleInput'),
        ...document.querySelectorAll('.vampire-matrix td'),
        ...document.querySelectorAll('.vampire-matrix th'),
        ...document.querySelectorAll('.vampire-matrix')
      ];
      
      console.log('Elements to style:', elementsToStyle.length);
      
      elementsToStyle.forEach((element, index) => {
        if (element) {
          console.log(`Styling element ${index}:`, element.tagName, element.className);
          if (settings.fontFamily) {
            element.style.fontFamily = settings.fontFamily;
            console.log(`Set fontFamily to: ${settings.fontFamily}`);
          }
          if (settings.fontSize) {
            element.style.fontSize = settings.fontSize + 'px';
            console.log(`Set fontSize to: ${settings.fontSize}px`);
          }
          if (settings.fontColor) {
            element.style.color = settings.fontColor;
            console.log(`Set fontColor to: ${settings.fontColor}`);
          }
        }
      });
      
      // Apply zoom if specified
      if (settings.zoom && settings.zoom !== 1.0) {
        console.log('Applying zoom:', settings.zoom);
        const elementsToZoom = [
          document.getElementById('consoleOutput'),
          document.querySelector('.agentstatus')
        ];
        
        elementsToZoom.forEach(element => {
          if (element) {
            element.style.transform = `scale(${settings.zoom})`;
            element.style.transformOrigin = 'top left';
            console.log('Applied zoom to:', element.id || element.className);
          }
        });
      }
      
      // Apply agent background image if specified
      if (settings.agentBackgroundImage) {
        console.log('Applying agent background image:', settings.agentBackgroundImage);
        document.body.style.backgroundImage = `url('${settings.agentBackgroundImage}')`;
        document.body.style.backgroundSize = 'cover';
        document.body.style.backgroundRepeat = 'no-repeat';
        document.body.style.backgroundPosition = 'center';
        document.body.style.backgroundAttachment = 'fixed';
      } else {
        console.log('Clearing agent background image');
        document.body.style.backgroundImage = '';
        document.body.style.backgroundSize = '';
        document.body.style.backgroundRepeat = '';
        document.body.style.backgroundPosition = '';
        document.body.style.backgroundAttachment = '';
      }
      
      console.log('=== FONT SETTINGS APPLIED ===');
    }
    
    // Handle font settings from separate settings window
    ipcRenderer.on('apply-font-settings', (event, settings) => {
      console.log('=== RECEIVED APPLY-FONT-SETTINGS IPC ===');
      console.log('Event:', event);
      console.log('Settings:', settings);
      applyFontSettings(settings);
    });
    
    // Load saved settings on page load
    window.addEventListener('DOMContentLoaded', () => {
      // Load settings from customize.js file
      ipcRenderer.invoke('get-customize-settings').then(settings => {
        if (settings) {
          console.log('Loading customize settings from file:', settings);
          applyFontSettings(settings);
        }
      }).catch(error => {
        console.error('Error loading customize settings:', error);
      });
    });
    
    // Add test keyboard shortcut (F5 to test applying settings)
    document.addEventListener('keydown', (event) => {
      if (event.key === 'F5') {
        event.preventDefault();
        console.log('=== F5 PRESSED - TESTING SETTINGS ===');
        const testSettings = {
          fontFamily: "'Courier New', monospace",
          fontSize: 20,
          fontColor: "#ff0000",
          zoom: 1.2
        };
        console.log('Applying test settings:', testSettings);
        applyFontSettings(testSettings);
      }
      
      // Zoom hotkeys for agent window
      if (event.ctrlKey && (event.key === '+' || event.key === '=')) {
        event.preventDefault();
        // Get current settings and increase zoom
        ipcRenderer.invoke('get-customize-settings').then(settings => {
          if (settings) {
            const newZoom = Math.min(2.0, (settings.zoom || 1.0) + 0.1);
            const updatedSettings = { ...settings, zoom: newZoom };
            applyFontSettings(updatedSettings);
            // Save updated settings
            ipcRenderer.send('apply-agent-settings', updatedSettings);
          }
        });
      }
      
      if (event.ctrlKey && event.key === '-') {
        event.preventDefault();
        // Get current settings and decrease zoom
        ipcRenderer.invoke('get-customize-settings').then(settings => {
          if (settings) {
            const newZoom = Math.max(0.5, (settings.zoom || 1.0) - 0.1);
            const updatedSettings = { ...settings, zoom: newZoom };
            applyFontSettings(updatedSettings);
            // Save updated settings
            ipcRenderer.send('apply-agent-settings', updatedSettings);
          }
        });
      }
    });
  </script>
</body>
</html>
